<template>
  <view class="container">
    <view class="hor-layout-center">
      <view class="main-title">产品名称:</view>
      <view class="input-view" placeholder="请输入名称">{{ productInfo.title }}</view>
    </view>
    <view class="ver-layout info-item">
      @
      <view class="hor-layout info-title">1.产品图片:</view>
      <scroll-view scroll-x="true" style="margin-top: 15px;">
        <view class="hor-layout" style="width: fit-content;">
          <block v-for="(url,index) in productInfo.image">
            <image :src="url" class="product-image"></image>
          </block>
        </view>
      </scroll-view>
    </view>
    <view class="ver-layout info-item">
      <view class="info-title">2.产品信息:</view>
      <view class="input-area" placeholder="请输入产品信息">{{ productInfo.info }}</view>
    </view>
    <view class="ver-layout info-item">
      <view class="info-title">3.使用问题:</view>
      <view class="input-area" placeholder="请输入使用问题">{{ productInfo.use }}</view>
    </view>
    <view class="ver-layout info-item">
      <view class="info-title">4.注意事项:</view>
      <view class="input-area" placeholder="请输入注意事项">{{ productInfo.note }}</view>
    </view>
  </view>
</template>

<script>
import {product} from '@/router.js'

export default {
  data() {
    return {
      product,
      productInfo: {}
    }
  },
  onLoad(options) {
    console.log(options,)
    this.getProductDetail(options.id)
  },
  onNavigationBarButtonTap(params) {
    this.deleteProduct()
  },
  methods: {
    getProductDetail(id) {
      this.$tools.showLoading()
      uniCloud.callFunction({
        name: 'database',
        data: {
          collection: 'product',
          type: 'doc',
          docId: id
        }
      }).then(res => {
        uni.hideLoading()
        console.log("getProductDetail", res)
        if (res.result.affectedDocs)
          this.productInfo = res.result.data[0]
        this.productInfo.images = this.productInfo.image.map(item => {
          item = item.replace('https://bucket-zyj001.oss-cn-wulanchabu.aliyuncs.com/', '')
          return item
        })
      })
    },
    deleteProduct() {
      uni.showModal({
        title: '提示',
        content: '确认删除该产品吗？',
        cancelText: "取消",
        confirmText: "删除",
        confirmColor: 'red',
        cancelColor: '#000000',
      }).then(res => {
        if (!res[1].confirm) return
        this.$tools.showLoading()
        uniCloud.callFunction({
          name: 'database',
          data: {
            type: 'remove',
            collection: 'product',
            docId: this.productInfo._id,
            images: this.productInfo.images
          }
        }).then(res => {
          uni.hideLoading()
          console.log("deleteProduct", res, this.product)
          if (res.result.affectedDocs)
            this.$tools.pageCallBackDelay(product, 'getProductList', '', '删除成功！')
        })
      })
    }
  }
}
</script>

<style>
page {
  padding: 15px;
}

.main-title {
  color: #ed143d;
  font-size: 15px;
  font-weight: bold;
}

.product-image {
  width: 60px;
  height: 60px;
  margin-right: 20px;
  border: 1px solid #eaeaea;
}

.input-view,
.input-area {
  background: #e4e4e4;
  color: #111111;
  padding: 5px 10px;
  border-radius: 3px;
  font-size: 14px;
}

.input-view {
  flex: 1;
  margin-left: 10px;
}

.input-area {
  margin-top: 5px;
  min-height: 60px;
}

.create-product,
.add-image {
  color: white;
  font-size: small;
  text-align: center;
  border-radius: 5px;
  background: #007AFF;
}

.create-product {
  position: fixed;
  width: 80%;
  left: 10%;
  bottom: 10px;
  height: 35px;
  line-height: 35px;
}

.add-image {
  width: fit-content;
  font-size: smaller;
  padding: 3px 5px;
  border-radius: 3px;
  margin-left: 10px;
}

.active {
  background: #0064d0;
}

.info-item {
  margin-top: 15px
}

.info-title {
  color: #646262;
  font-size: 13px;
  font-weight: bold;
}
</style>
